<template>
  <el-form>
    <el-form-item v-show="hidden" label="ID">
      <el-input v-model="param.id"/>
    </el-form-item>
    <el-form-item label="中文名称:">
      <el-input v-model="param.nickname" clearable placeholder="创建的角色的名称"/>
    </el-form-item>
    <el-form-item label="英文名称:">
      <el-input v-model="param.name" clearable placeholder="创建的角色的名称"/>
    </el-form-item>
    <el-form-item label="权限">
      <el-select v-model="param.permissions" multiple style="width: 100%" value-key="remark">
        <el-option v-for="(permissionsList) in permissions" :key="permissionsList.remark"
                   :label="permissionsList.remark" :value="permissionsList"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item style="text-align: right">
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="Submit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {copyObj} from "../../common/utils";
import {findAllPermission} from "../../network/userPermissionApi";
import {RoleSave} from "../../network/userRoleApi";

export default {
  name: "roleFrom",
  data() {
    return {
      hidden: false,
      param: {
        id: null,
        nickname: null,
        name: null,
        permissions: [],
      },
      permissions: [],
    }
  },
  methods: {
    //查询所有权限
    findAll(){
      findAllPermission({params: 1}).then(res => {
        this.permissions = res.data;
        console.log(this.permissions)
      })
    },
    clear() {
      this.$confirm('确认清空？')
          .then(() => {
            this.param = {};
          }).then(() => {
        this.$message({
          message: "清空成功",
          type: 'success'
        })
      })
    },
    Submit() {
      RoleSave(this.param).then(res => {
        switch (res.code) {
          case 2000 :
            this.$emit("success");
            break;
          default:
        }
        })
    }
  },
  mounted() {
    this.param = copyObj(this.data);
    this.findAll();
  },
  watch: {
    "data": {
      handler: function (e) {
        this.param = copyObj(e);
        this.param.permissions = this.param.permissions ? this.param.permissions : [];
      }
    }
  },
  props: ["data"],
}
</script>

<style scoped>
</style>